<template>
    <div class="list">
        <div class="current" ref="current" :style="{backgroundImage:'url(' +current + ')'}" @mouseenter="enter($event)"
             @mouseleave="leave($event)">
            <div class="mask" ref="mask"></div>
        </div>
        <div class="carousel" @touchstart.stop="scrollStart($event)" @touchmove.stop="scrollMove($event)">
            <i class="arrow-left" @click="scroll(-120)"></i>
            <div class="content" ref="content">
                <img v-for="item in value" :src="item.fullUrl" @mouseover="current=item.fullUrl"/>
            </div>
            <i class="arrow-right" @click="scroll(120)"></i>
        </div>
        <div class="zoom" ref="zoom" :style="{backgroundImage:'url(' +current + ')'}"/>
    </div>
</template>
<script>

    export default {
        props: {
            value: {
                type: Array, default() {
                    return [];
                }
            }
        },
        data() {
            return {
                scrollStartX: 0,
                moveStartX: 0,
                current: (this.value[0] || {}).fullUrl || "",
                dom_pos: {}
            }
        },
        watch: {
            value: {
                deep: true, handler(v) {
                    if (!v || !v[0]) return;

                    this.current = v[0].fullUrl;
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$refs["content"].style.overflowX = "hidden";
                }, 10);
            });
        },
        methods: {
            scroll(value) {
                var content = this.$refs["content"];
                content.scrollBy(value, 0);
            },
            move_work(e) {
                var dx = e.clientX - this.dom_pos.x - this.dom_pos.width / 4,
                    dy = e.clientY - this.dom_pos.y - this.dom_pos.height / 4;

                dx = Math.max(0, dx);
                dy = Math.max(0, dy);
                dx = Math.min(dx, this.dom_pos.width / 2);
                dy = Math.min(dy, this.dom_pos.height / 2);

                this.$refs["mask"].style.cssText += ";left:" + dx + "px;top:" + dy + "px;";
                this.$refs["zoom"].style.cssText += ";background-position:" + (2 * (0 - dx)) + "px " + (2 * (0 - dy)) + "px;";
            },
            enter(e) {
                var current = this.$refs["current"];

                var zoom = this.$refs["zoom"];
                zoom.style.display = "block";

                this.dom_pos = current.getBoundingClientRect();
                removeEventListener("mousemove", this.move_work);
                addEventListener("mousemove", this.move_work);
            },
            leave(e) {
                var current = this.$refs["current"];
                var zoom = this.$refs["zoom"];
                zoom.style.display = "none";
                removeEventListener("mousemove", this.move_work);
            },
            scrollStart(e) {
                var content = this.$refs["content"];
                this.scrollStartX = content.scrollLeft;
                this.moveStartX = e.touches[0].clientX;
            },
            scrollMove(e) {
                var content = this.$refs["content"];
                content.scrollLeft = this.scrollStartX + (this.moveStartX - e.touches[0].clientX);
            }
        }
    }

</script>
<style scoped>
    .list {
        position: relative;
    }

    .list .current {
        width: 48rem;
        height: 48rem;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
    }

    .list .current .mask {
        width: 24rem;
        height: 24rem;
        background-color: #FFFF00;
        opacity: 0.3;
        position: absolute;
        display: none;
    }

    .list .current:hover .mask {
        display: block;
    }

    .list .zoom {
        position: absolute;
        width: 48rem;
        height: 48rem;
        left: 49rem;
        top: 0;
        display: none;
        background-size: 200% 200%;
        background-repeat: no-repeat;
    }

    .arrow-left {
        background: url(../assets/arrow.png) no-repeat;
        background-position: 0 0;
    }

    .arrow-left:hover {
        background: url(../assets/arrow.png) no-repeat;
        background-position: -22px 0;
    }

    .arrow-right {
        background: url(../assets/arrow.png) no-repeat;
        background-position: 0 -33px;
    }

    .arrow-right:hover {
        background: url(../assets/arrow.png) no-repeat;
        background-position: -23px -33px;
    }

    .carousel {
        display: flex;
        flex-direction: row;
        width: 48rem;
        align-items: center;
    }

    .carousel i {
        width: 23px;
        height: 33px;
        z-index: 99;
    }

    .carousel .content {
        width: 48rem;
        border-left: solid 30px transparent;
        border-right: solid 30px transparent;
        margin-left: -30px;
        margin-right: -30px;
        display: flex;
        box-sizing: border-box;
    }

    .carousel .content img {
        width: 100px;
        height: 100px;
        min-width: 100px;
        min-height: 100px;
        border: solid 2px white;
    }

    .carousel .content img:hover {
        border: solid 2px red;
    }

    @media screen and (max-width: 60rem) {
        .carousel .content {
            width: 90vw;
        }

        .list .current {
            width: 90vw;
            height: 90vw;
        }

        .carousel {
            width: auto;
        }

        .list .zoom {
            display: none !important;
        }

        .list .current:hover .mask {
            display: none !important;
        }
    }
</style>
